<script setup>
import { getGoodsCommentListAPI, reviewGoodsCommentAPI, updateGoodsCommentStatusAPI } from '@/api/goods_comment'
import { ref } from 'vue'
import { useInitTable } from '@/composables/useCommon'
import Search from '@/components/Search.vue'
import SearchItem from '@/components/SearchItem.vue'
import { toast } from '@/composables/util'
const roles = ref([])
const {
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  total,
  currentPage,
  handleStatusChange,
  handleDelete,
  getData,
} = useInitTable(
  {
    searchForm: {
      title: ''
    },
    getList: getGoodsCommentListAPI,
    onGetListSuccess: (res) => {
      tableData.value = res.list.map((o) => {
        o.statusLoading = false
        o.textareaEdit = false
        return o
      })
      total.value = res.totalCount
      roles.value = res.roles
    },
    updateStatus: updateGoodsCommentStatusAPI
  }
)


const handleCurrentChange = (val) => {
  currentPage.value = val
  getData()
}

const textarea = ref('')
const openTextarea = (row, data = '') => {
  textarea.value = data
  row.textareaEdit = true
}
const review = (row) => {
  if (textarea.value === '') {
    return toast('回复内容不能为空', 'error')
  }
  reviewGoodsCommentAPI(row.id, textarea.value)
    .then(res => {
      row.textareaEdit = false
      toast('回复成功')
      getData()
    })
}
</script>

<template>
  <el-card>
    <!-- 搜索 -->
    <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
      <SearchItem label="关键词">
        <el-input v-model="searchForm.title" placeholder="商品标题" clearable></el-input>
      </SearchItem>
    </Search>
    <!-- 表格区域 -->
    <el-table default-expand-all class="mt-3" v-loading="loading" :data="tableData" border stripe>
      <el-table-column type="expand">
        <template #default="{ row }">
          <div class="flex pl-18">
            <el-avatar :size="50" :src="row.user.avatar" fit="fill" class="mr-3"></el-avatar>
            <div class="flex-1">
              <h6 class="flex items-center">
                {{ row.user.nickname || row.user.username }}
                <small class="text-gray-400 ml-2">{{ row.review_time }}</small>
                <el-button v-if="!row.textareaEdit && !row.extra" size="small" class="ml-auto"
                  @click="openTextarea(row)">回复</el-button>
              </h6>
              {{ row.review.data }}
              <div class="py-2">
                <el-image v-for="(item, index) in row.review.image" :key="index" :src="item" fit="cover" :lazy="true"
                  style="width: 100px; height: 100px;" class="rounded"></el-image>
              </div>

              <div v-if="row.textareaEdit">
                <el-input v-model="textarea" placeholder="请输入评价内容" type="textarea" :rows="2" />
                <div class="py-2">
                  <el-button type="primary" size="small" @click="review(row)">回复</el-button>
                  <el-button size="small" class="ml-2" @click="row.textareaEdit = false">取消</el-button>
                </div>
              </div>
              <template v-else>
                <div class="mt-3 bg-gray-100 p-3 rounded" v-for="(item, index) in row.extra" :key="index">
                  <h6 class="flex font-bold">
                    客服
                    <el-button type="info" size="small" class="ml-auto"
                      @click="openTextarea(row, item.data)">修改</el-button>
                  </h6>
                  <p>{{ item.data }}</p>
                </div>
              </template>
            </div>
          </div>
        </template>
      </el-table-column>


      <el-table-column label="ID" width="70" align="center" prop="id"></el-table-column>
      <el-table-column label="商品" width="200" align="center">
        <template #default="{ row }">
          <div class="flex items-center">
            <!-- 头像 -->
            <el-image :src="row.goods_item ? row.goods_item.cover : ''" fit="fill" :lazy="true"
              style="width: 50px; height: 50px;" class="rounded"></el-image>

            <div class="flex flex-col justify-between items-start ml-5">
              <h6>{{ row.goods_item?.title ?? '商品已被删除' }}</h6>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="评价信息" width="200">
        <template #default="{ row }">
          <div>
            <p>用户：{{ row.user.nickname || row.user.username }}</p>
            <p>
              <el-rate v-model="row.rating" disabled show-score text-color="#ff9900" />
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评价时间" align="center" prop="review_time" width="180"></el-table-column>

      <el-table-column label="状态" align="center">
        <template #default="{ row }">
          <el-switch :disabled="row.super === 1" :loading="row.statusLoading" :model-value="row.status"
            :active-value="1" :inactive-value="0" @change="handleStatusChange($event, row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="flex justify-center mt-auto-3" background layout="prev, pager, next" :total="total"
      :current-page="currentPage" @current-change="handleCurrentChange" />


  </el-card>
</template>
